<html>

<head>
    <title>拖拽示例</title>
    <meta charset="utf-8" />
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <style type="text/css">
        body {
            font-family: Arial;
            font-size: 12pt;
            padding: 20px;
            width: 820px;
            margin: 20px auto;
            border: solid 1px black;
        }

        h1 {
            font-size: 16pt;
        }

        h2 {
            font-size: 13pt;
        }

        ul {
            margin: 0px;
            padding: 0px;
            margin-left: 20px;
        }
        li >div{

        }
    </style>
    <script type="text/javascript" src="./jquery.dragsort.js"></script>
</head>

<body>

    <ul id="list1" class="draglist" data-groupid="gid-1">
        <li data-id="1" data-groupid="gid-1">
            <div>1</div>
        </li>
        <li data-id="2" data-groupid="gid-1">
            <div>2</div>
        </li>
        <li data-id="3" data-groupid="gid-1">
            <div>3</div>
        </li>
        <li data-id="4" data-groupid="gid-1">
            <div>4</div>
        </li>
        <li data-id="5" data-groupid="gid-1">
            <div>5</div>
        </li>
        <li data-id="6" data-groupid="gid-1">
            <div>6</div>
        </li>
        <li data-id="7" data-groupid="gid-1">
            <div>7</div>
        </li>
        <li data-id="8" data-groupid="gid-1">
            <div>8</div>
        </li>
        <li data-id="9" data-groupid="gid-1">
            <div>9</div>
        </li>
    </ul>
    <input name="sortorder" id="gid-1" type="hidden" value="1,2,3,4,5,6,7,8,9" />
    <script type="text/javascript">
        $(".draglist").dragsort({
            dragSelector: "li",
            dragBetween: true,
            dragEnd: saveOrder, //拖拽完成后回调函数
            placeHolderTemplate: "<li class='placeHolder'><div></div></li>" //拖动是阴影
        });

        function saveOrder() {
            var $this = $(this);
            console.log('$this: ', $this.parent().children());
            var data = $this.parent().children().map(function () {
                
                return $this.attr("data-id");
            }).get();
            console.log('data: ', data);

            var currentid = $this.attr("data-id"); //组件id
        };

        /**
         * 保存位置
         */
        function savePosition() {
            var inputs = $("input[name='sortorder']");
            var arr = new Array();
            //构造数据
            inputs.each(function () {
                var $this = $(this);
                arr.push($this.attr("id") + "-" + $this.val());
            });
        } 
    </script>
</body>

</html>